<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery-CSV - Flot Demo</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"</script>
<script></script>
<script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script>
<script>
  $(function() {
    $("#tabs").tabs();
  });

  $(document).ready(function() {
    if(isAPIAvailable()) {
      $('#fileInput').bind('change', handleFileSelect);
    }

    flotTextData();

    $('#run').bind('click', flotTextData);
  });

  // Used to generate the data for the sine wave demo
  // source: http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/
  function drawSine() {
    var counter = 0;
    // 100 iterations
    var increase = Math.PI * 2 / 100;
    for ( i = 0; i <= 1; i += 0.01 ) {
      x = i;
      y = Math.sin( counter ) / 2 + 0.5;
      counter += increase;
      console.log(x + ',' + y);
    }
  }

  // plots the data input into the textarea
  function flotTextData() {
    var options = {
      series: {
        lines: { show: true },
        points: { show: true }
      }
    }

    var data1 = [];
    data1[0] = $.csv.toArrays($('#textInput').val(), {
      onParseValue: $.csv.hooks.castToScalar
    });
    flot1 = $.plot($('#flot1'), data1, options);

    var data2 = [];
    flot2 = $.plot($('#flot2'), data2, options);
  }

  // displays a warning if the browser doesn't support the HTML5 File API
  function isAPIAvailable() {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      // Great success! All the File APIs are supported.
      return true;
    } else {
      alert("The browser you're using does not currently support\nthe HTML5 File API. As a result the file loading demo\nwon't work properly.");
      return false;
    }
  }

  // handles csv files
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // reset the flot dataset
    flot2.setData([]);
    for(var i=0, len=files.length; i<len; i++) {
      flotFileData(files[i], i);
    }
  }

  function flotFileData(file, i) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event){
      var csv = event.target.result;
      var data = flot2.getData();
      var newData = $.csv.toArrays(csv, {
        onParseValue:$.csv.hooks.castToScalar
      });
      // append to the existing dataset
      data[i] = newData;
      flot2.setData(data);
      flot2.setupGrid();
      flot2.draw();
    };
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
  }
</script>
<style>
textarea {
width:100%;
}
</style>
</head>

<body>
<div id=tabs>
  <ul>
    <li><a href="#tabs-1">Intro</a></li>
    <li><a href="#tabs-2">Load From TextArea</a></li>
    <li><a href="#tabs-3">Load From File</a></li>
  </ul>
  <div id=tabs-1>
    <h2> Welcome to the jQuery-CSV + Flot Demonstration</h2>
      <p>On the adjacent tabs, you will find demonstrations whereby you can load your own data into a fully functional Flot chart.</p>
      <p>You'll need the HTML5 File Api to use the file loader but no worries, if your browser is lagging behind in HTML5 adoption ::cough::IE::cough:: you can still try out the demos by pasting data into the text area in the first example.</p>
      <p>If you don't have a dataset of your own feel free to try one of these:</p>
      <ul>
        <li><a href="http://jquery-csv.googlecode.com/git/examples/data/analytics1.csv">Google Analytics Data Dump 1</a></li>
        <li><a href="http://jquery-csv.googlecode.com/git/examples/data/analytics2.csv">Google Analytics Data Dump 2</a>
        <li><a href="http://jquery-csv.googlecode.com/git/examples/data/sine.csv">Sine Wave</a></li>
        <li><a href="http://jquery-csv.googlecode.com/git/examples/data/sample2.csv">Auto Data</a></li>
      </ul>
      <hr />
      <p>The main project page can be found on <a href="http://code.google.com/p/jquery-csv/">Google Code</a>
      <p>If you want the complete documentation. Goto: <a href="http://code.google.com/p/jquery-csv/wiki/API">API Wiki</a></p>
      <p>If you would like to provide feedback, you may do so on the <a href="http://code.google.com/p/jquery-csv/wiki/Feedback">Feedback Wiki</a>.</p>
      <p>If you find a bug, report a 'Defect' in the <a href="http://code.google.com/p/jquery-csv/issues/list">Issues</a> section of the project site.</p>
      <p>If you have a suggestion for a new feature, create a 'Feature Request' in the <a href="http://code.google.com/p/jquery-csv/issues/list">Issues</a> section of the project site.</p>
      <hr />
      <h2>Enjoy...</h2>
  </div>
  <div id=tabs-2>
    <p>To use this demo, simply paste your dataset into the text area and hit the 'Run' button.</p>
    <hr />
    <textarea id=textInput style="height:150px;">0,0.5
0.01,0.5313952597646567
0.02,0.5626666167821521
0.03,0.5936906572928623
0.04,0.6243449435824274
0.05,0.6545084971874737
0.060000000000000005,0.684062276342339
0.07,0.7128896457825363
0.08,0.7408768370508576
0.09,0.7679133974894983
0.09999999999999999,0.7938926261462365
0.10999999999999999,0.8187119948743449
0.11999999999999998,0.8422735529643443
0.12999999999999998,0.8644843137107057
0.13999999999999999,0.8852566213878945
0.15,0.9045084971874736
0.16,0.9221639627510074
0.17,0.9381533400219317
0.18000000000000002,0.9524135262330098
0.19000000000000003,0.9648882429441257
0.20000000000000004,0.9755282581475768
0.21000000000000005,0.9842915805643155
0.22000000000000006,0.9911436253643444
0.23000000000000007,0.996057350657239
0.24000000000000007,0.9990133642141358
0.25000000000000006,1
0.26000000000000006,0.9990133642141358
0.2700000000000001,0.9960573506572389
0.2800000000000001,0.9911436253643442
0.2900000000000001,0.9842915805643154
0.3000000000000001,0.9755282581475766
0.3100000000000001,0.9648882429441255
0.3200000000000001,0.9524135262330096
0.3300000000000001,0.9381533400219315
0.34000000000000014,0.9221639627510072
0.35000000000000014,0.9045084971874733
0.36000000000000015,0.8852566213878942
0.37000000000000016,0.8644843137107052
0.38000000000000017,0.8422735529643438
0.3900000000000002,0.8187119948743442
0.4000000000000002,0.7938926261462359
0.4100000000000002,0.7679133974894976
0.4200000000000002,0.7408768370508568
0.4300000000000002,0.7128896457825354
0.4400000000000002,0.6840622763423381
0.45000000000000023,0.6545084971874727
0.46000000000000024,0.6243449435824263
0.47000000000000025,0.5936906572928612
0.48000000000000026,0.5626666167821509
0.49000000000000027,0.5313952597646555
0.5000000000000002,0.4999999999999987
0.5100000000000002,0.468604740235342
0.5200000000000002,0.43733338321784654
0.5300000000000002,0.4063093427071363
0.5400000000000003,0.3756550564175712
0.5500000000000003,0.3454915028125249
0.5600000000000003,0.3159377236576596
0.5700000000000003,0.2871103542174622
0.5800000000000003,0.25912316294914095
0.5900000000000003,0.23208660251050028
0.6000000000000003,0.20610737385376204
0.6100000000000003,0.1812880051256538
0.6200000000000003,0.15772644703565436
0.6300000000000003,0.135515686289293
0.6400000000000003,0.11474337861210421
0.6500000000000004,0.09549150281252528
0.6600000000000004,0.07783603724899163
0.6700000000000004,0.06184665997806754
0.6800000000000004,0.04758647376698977
0.6900000000000004,0.03511175705587394
0.7000000000000004,0.024471741852422957
0.7100000000000004,0.015708419435684295
0.7200000000000004,0.008856374635655584
0.7300000000000004,0.003942649342761062
0.7400000000000004,0.0009866357858642205
0.7500000000000004,0
0.7600000000000005,0.0009866357858642205
0.7700000000000005,0.0039426493427610065
0.7800000000000005,0.008856374635655528
0.7900000000000005,0.01570841943568424
0.8000000000000005,0.0244717418524229
0.8100000000000005,0.03511175705587388
0.8200000000000005,0.047586473766989656
0.8300000000000005,0.061846659978067486
0.8400000000000005,0.07783603724899157
0.8500000000000005,0.09549150281252516
0.8600000000000005,0.1147433786121041
0.8700000000000006,0.13551568628929272
0.8800000000000006,0.15772644703565392
0.8900000000000006,0.18128800512565313
0.9000000000000006,0.2061073738537612
0.9100000000000006,0.23208660251049917
0.9200000000000006,0.2591231629491396
0.9300000000000006,0.2871103542174607
0.9400000000000006,0.31593772365765777
0.9500000000000006,0.34549150281252283
0.9600000000000006,0.3756550564175689
0.9700000000000006,0.4063093427071337
0.9800000000000006,0.4373333832178437
0.9900000000000007,0.46860474023533893</textarea>
    <input id=run type=button  value="Run" />
    <hr />
    <div id=flot1 style="width:600px;height:300px;margin:0 auto;"></div>
  </div>
  <div id=tabs-3>
    <p>To use this demo, just choose a CSV file through the file dialog. Really, it's that easy.</p>
    <p>Note: This demo is capable of processing and loading multiple data files. Just select more than one file in the dialog.</p>
    <p>I suggest you try loading the <a href="http://jquery-csv.googlecode.com/git/examples/data/analytics1.csv">analytics1.csv</a> and <a href="http://jquery-csv.googlecode.com/git/examples/data/analytics2.csv">analytics2.csv</a> data sets together.</p>
    <hr />
    <input id=fileInput type=file name=files[] multiple />
    <hr />
    <div id=flot2 style="width:600px;height:300px;margin:0 auto;"></div>
  </div>
</body>
</html>
